<template>
	<view class="classify" :style="{ height: windowHeight + 'px' }">
		<scroll-view class="left" scroll-y>
			<view class="left-box">
				<text @click="activeIndex = index" :class="{ active: activeIndex === index }"
					v-for="(item,index) in tabData" :index="index">{{ item.title }}</text>
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="list">
				<list-item style="width: 48%;" v-for="(item, index) in list" :key="index" :item="item"></list-item>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData: [],
				activeIndex: 0,
				windowHeight: 0
			};
		},
		computed: {
			list() {
				if(this.tabData.length === 0) return [];
				return this.tabData[this.activeIndex].children
			}
		},	
		methods: {
			async getTabData() {
				const [error, resp] = await uni.request({
					url: 'http://localhost:3000/tabData'
				})
				this.tabData = resp.data
			}
		},
		onLoad() {
			this.getTabData();
			const info = uni.getWindowInfo()
			this.windowHeight = info.windowHeight
		}
	}
</script>

<style lang="scss">
	.classify {
		display: flex;

		// flex-direction: c;
		.left {
			width: 100rpx;
			height: 100%;
			border-right: 2rpx solid #ccc;

			.left-box {
				flex-direction: column;
				display: flex;
				align-items: center;

				text {
					margin: 10rpx 0;

					&.active {
						color: red;
					}
				}
			}



		}

		.right {
			height: 100%;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 10rpx;
			}
		}
	}
</style>